{% extends "auth-menu.html" %}
{% load tag %}
{% block head %}


{#    时间范围控件#}
<link rel="stylesheet" type="text/css" media="all" href="/bootstrap/daterangepicker/daterangepicker-bs3.css"/>
<script type="text/javascript" src="/bootstrap/daterangepicker/jquery.min.js"></script>
{#<script type="text/javascript" src="/bootstrap/daterangepicker/bootstrap.min.js"></script>#}
<script type="text/javascript" src="/bootstrap/daterangepicker/moment.js"></script>
<script type="text/javascript" src="/bootstrap/daterangepicker/daterangepicker.js"></script>


 {% endblock %}

{% block display1 %}
    "display: block"
{% endblock %}

{% block active1 %}
    'active'
{% endblock %}

{% block active_sub4 %}
    'active'
{% endblock %}

{% block main %}
   <div class='span12'>
        <div class='page-header'>
            <h1 class='pull-left'>
                <i class='icon-edit'></i>
                <span>数据源统计报表</span>
            </h1>
            <div class='pull-right'>
                <ul class='breadcrumb'>
                    <li>
                        <a href="/index"><i class='icon-bar-chart'></i>
                        </a>
                    </li>
                    <li class='separator'>
                        <i class='icon-angle-right'></i>
                    </li>
                    <li>
                        数据源统计
                    </li>
                    <li class='separator'>
                        <i class='icon-angle-right'></i>
                    </li>
                    <li class='active'>出租车数据源统计</li>
                </ul>
            </div>
        </div>
    </div>

<form accept-charset="UTF-8" class="navbar-search pull-left hidden-phone" method="get" />
    <div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
     时间区间：
    <div class='input-append'>
        <span class="add-on input-group-addon">
        <i class='icon-calendar'></i>
        </span>
        <input type="text" readonly="readonly" style="width: 180px" name="scope" id="reservation" class="form-control" value="{{ startdate }} - {{ enddate }}" />

    </div>
    数据源：
        <select id='inputSelect' name="source" style="width:100px;" >
        {% for i in source_list %}
            <option {{ i.select }}/>{{ i.source | code_gbk }}
        {% endfor %}
        </select>
<button class="btn btn-link icon-search " name="button" type="submit"></button>

</form>
           <script type="text/javascript">
               $(document).ready(function() {
                  $('#reservation').daterangepicker({
                          "startDate": {{ startdate }},
                        "endDate": {{ enddate }}
                          },
                          function(start, end, label) {
                    console.log(start.toISOString(), end.toISOString(), label);
                  });
               });
               </script>

<div class='row-fluid'>
<!--<div id="main1" style="width: 1100px;height:600px;"></div>-->
<div id="main1" style="width: 100%;height:600px;"></div>
    <script type="text/javascript">

var Chart1 = echarts.init(document.getElementById('main1'));
// 指定图表的配置项和数据

    Chart1.showLoading({
        text: '正在努力的读取数据中...'
    });

option = {
{#    backgroundColor: 'rgba(245,255,0,0.8)',   ##背景颜色#}
{#    color:['#87cefa', 'rgba(123,123,123,0.5)'],  数值系列的颜色列表,柱子的颜色#}
    title : {
        text: '{{ source|safe }}',
        subtext: 'GPS与车辆数'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['GPS量(万)','车辆数(辆)']
    },
    toolbox: {
        show : true,
        feature : {
{#            mark : {show: true},#}
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',

            data : {{ date_list|safe }}
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'GPS量(万)',
            type:'bar',
            data:{{ gps_data_list|safe }},
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'车辆数(辆)',
            type:'bar',
            data:{{ car_list|safe }},
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name : '平均值'}
                ]
            }
        }
    ]
};
    Chart1.setOption(option);
    {#        // 使用刚指定的配置项和数据显示图表。#}


    Chart1.hideLoading();
    </script>

</div>
{#    图 与 数据表的分割#}
<hr class='hr-double' />
<hr class='hr-double' />

<div class='row-fluid'>
<div class='span12 box bordered-box orange-border' style='margin-bottom:0;'>
<div class='box-header orange-background'>
    <div class='title'>{{ startdate }}至{{ enddate }} {{ source }}数据源情况</div>
    <div class='actions'>
        <a href="#" class="btn box-remove btn-mini btn-link"><i class='icon-remove'></i>
        </a>
        <a href="#" class="btn box-collapse btn-mini btn-link"><i></i>
        </a>
    </div>
</div>
<div class='box-content box-no-padding'>
<div class='responsive-table'>
<div class='scrollable-area'>
<table class='data-table table table-bordered table-striped' style='margin-bottom:0px;'>
{#<table class="table table-striped table-bordered table-hover datatable" style='margin-bottom:0px;'>#}
<thead>
<tr>
 {% for i in table_header %}
     <th  class="sorting_asc" aria-label="Rendering engine: activate to sort column descending" aria-sort="ascending" style="width: 240px;" colspan="1" rowspan="1" aria-controls="DataTables_Table_0" tabindex="0" role="columnheader" class="sorting_asc">{{ i }}</th>
{% endfor %}
</tr>
</thead>
<tbody>

{% for row in data %}
    <tr>

    {% for field in row %}

        <td>{{ field|escape|default:"" }}</td>

    {% endfor %}
    </tr>
{% endfor %}





</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<hr class='hr-double' />

</div>
</div>
</div>
</section>
</div>
{% endblock %}

{% block script %}

{#表格JS#}
<script src='/bootstrap/assets/javascripts/plugins/datatables/jquery.dataTables.min.js' type='text/javascript'></script>
<script src='/bootstrap/assets/javascripts/plugins/datatables/jquery.dataTables.columnFilter.js' type='text/javascript'></script>

<script src='/bootstrap/assets/javascripts/plugins/common/bootstrap-wysihtml5.js' type='text/javascript'></script>

<!-- / naked password -->
<script src='/bootstrap/assets/javascripts/plugins/naked_password/naked_password-0.2.4.min.js' type='text/javascript'></script>
<!-- / nestable -->
<script src='/bootstrap/assets/javascripts/plugins/nestable/jquery.nestable.js' type='text/javascript'></script>
{#<!-- / tabdrop -->#}
<script src='/bootstrap/assets/javascripts/plugins/tabdrop/bootstrap-tabdrop.js' type='text/javascript'></script>

<script src='/bootstrap/assets/javascripts/tables.js' type='text/javascript'></script>
<!-- / max length -->
<script src='/bootstrap/assets/javascripts/plugins/bootstrap_maxlength/bootstrap-maxlength.min.js' type='text/javascript'></script>
<!-- / timeago -->
<script src='/bootstrap/assets/javascripts/plugins/timeago/jquery.timeago.js' type='text/javascript'></script>

<!-- / autosize (for textareas) -->
<script src='/bootstrap/assets/javascripts/plugins/autosize/jquery.autosize-min.js' type='text/javascript'></script>
<!-- / charCount -->
<script src='/bootstrap/assets/javascripts/plugins/charCount/charCount.js' type='text/javascript'></script>




{#时间范围控件#}
{#<script type="text/javascript" src="/bootstrap/daterangepicker/jquery.min.js"></script>#}
{#<script type="text/javascript" src="/bootstrap/daterangepicker/bootstrap.min.js"></script>#}
<script type="text/javascript" src="/bootstrap/daterangepicker/moment.js"></script>
<script type="text/javascript" src="/bootstrap/daterangepicker/daterangepicker.js"></script>

{% endblock %}
